<template>
  <div class="app-container">

    <el-table
      :data="deviceList"
      style="width: 100%"
    >
      <el-table-column
        prop="deviceCore"
        :label="$t('deviceCore')"
      />
      <el-table-column
        prop="hardwareCode"
        :label="$t('hardware')"
      />
      <el-table-column
        prop="softwareCode"
        :label="$t('software')"
      />
      <el-table-column
        prop="productCode"
        :label="$t('product')"
      />
      <el-table-column
        prop="seriesCode"
        :label="$t('series')"
      />
      <el-table-column
        prop="loginNum"
        :label="$t('login')"
      />
      <el-table-column
        prop="ipAddress"
        :label="$t('ip')"
      />
      <el-table-column
        prop="address"
        :label="$t('address')"
      />
      <el-table-column :label="$t('date')" width="220">
        <template slot-scope="scope">
          <i class="el-icon-time"/>
          <span style="margin-left: 13px">{{ formatDate(scope.row.loginDate) }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('status')" prop="statusCode" :formatter="formatStatusCode"/>
      <el-table-column width="150">
        <template slot-scope="scope">
          <el-progress type="circle" :percentage="scope.row.downloadPercentage" :width="50"/>
        </template>
      </el-table-column>
    </el-table>

    <div style="text-align: right;margin: 15px 0">
      <el-pagination
        background
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

  </div>
</template>

<script>
import { pageGetOtaDevice } from '@/api/ota/otaDeviceApi'
import { formatDate } from '@/util/common'
import { getPageSize, setPageSize } from '@/util/storage'

export default {
  name: 'OtaDevice',
  data() {
    return {
      deviceList: [],
      currentPage: 1,
      total: 0,
      pageSize: getPageSize(),
      timer: null
    }
  },
  destroyed() {
    if (!this.timer) {
      return
    }
    clearInterval(this.timer)
  },
  created() {
    this.timer = setInterval(() => {
      this.pageGetOtaDevice()
    }, 3000)
    this.pageGetOtaDevice()
  }, methods: {
    formatStatusCode(item) {
      switch (item.statusCode) {
        case 0:
          return this.$t('no') + this.$t('product')
        case 1:
          return this.$t('no') + this.$t('series')
        case 2:
          return this.$t('no') + this.$t('hardware')
        case 3:
          return this.$t('no') + this.$t('software')
        case 4:
          return this.$t('data') + this.$t('too') + this.$t('long')
        case 5:
          return this.$t('file') + this.$t('too') + this.$t('long')
        case 6:
          return this.$t('success')
        default:
          return item.statusCode
      }
    },
    formatDate(time) {
      return formatDate(this, time)
    },
    handleSizeChange(val) {
      this.pageSize = val
      setPageSize(this.pageSize)
      this.pageGetOtaDevice()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.pageGetOtaDevice()
    },
    pageGetOtaDevice() {
      pageGetOtaDevice({
        pageSize: this.pageSize,
        currentPage: this.currentPage
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.total = data.total
          this.deviceList = data.data
        } else {
          this.total = 0
          this.deviceList = []
        }
      })
    }
  }

}
</script>


